<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="xlsx.full.min.js"></script>
    <style type="text/css">
        /* excel文件 */
        .container_table {
            height: 100%;
            width: 100%;
        }

        table {
            border-collapse: collapse;
            width: auto;
        }

        table td {
            width: auto;
            padding: 10px;
            border-bottom: 1px solid #000000;
            border-right: 1px solid #000000;
            /*下面三行设置表格不会因为宽度太小而换行*/
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        table tr:first-child td {
            width: auto;
            padding: 10px;
            border-top: 1px solid #000000;
        }

        table tr td:first-child {
            width: auto;
            padding: 10px;
            border-left: 1px solid #000000;
        }
    </style>
</head>

<body>
    <div class="container_table">
        <input type="file" class="my_input" onchange="importExcel(event)" id="upload" />
        <button onclick="export_excel()">导出excel表格</button>
        <table id="TableToExport"></table>
    </div>
    <script>
        const tableDOM = document.getElementById("TableToExport")
        var wb = XLSX.utils.table_to_book(document.getElementById("TableToExport"))
        async function importExcel(e) {
            const files = e.target.files;
            console.log(files);
            if (!files.length) {
                return;
            } else if (!/\.(xls|xlsx)$/.test(files[0].name.toLowerCase())) {
                return alert("上传格式不正确，请上传xls或者xlsx格式");
            }
            const data = await files[0].arrayBuffer()
            const wb = XLSX.read(data);
            const ws = wb.Sheets[wb.SheetNames[0]];
            if (ws['!ref'] === undefined) return alert('当前的excel表格文件为空')
            const html = XLSX.utils.sheet_to_html(ws, { id: "tabeller" })
            tableDOM.innerHTML = html
            var input = document.getElementById("upload");
            input.value = "";
        }
        //
        function export_excel() {
            const tableDOM = document.getElementById("TableToExport")
            const wb = XLSX.utils.table_to_book(tableDOM);
            XLSX.writeFile(wb, "SheetJSIntro.xlsx");
        }

    </script>
</body>

</html>